<script setup>
import {hezuopartner} from '@/apis/home.js'
// import {  } from 'ant-design-vue'
import {reactive} from "vue";
import DOMPurify from 'dompurify';
import { useRoute  } from 'vue-router';

const route = useRoute();
const id = route.query.id
const content = ref()
const page11 = ref(1)
const total =ref()
const rows = ref()
const moreDetail = reactive({});
hezuopartner({ page: page11.value }).then(res => {
  Object.assign(moreDetail, res.data);
  rows.value=  res.data.rows.rows
  total.value = res.data.rows.total
})

function escape2Html(str){
  let arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
    return arrEntities[t];
  });
}

function changePage(page){
  page11.value = page
  hezuopartner({ page: page11.value }).then(res => {
    Object.assign(moreDetail, res.data);
    rows.value=  res.data.rows.rows
    total.value = res.data.rows.total
  })
}
</script>

<template>
  <div class="slogo">
    <div class="texr">
      <div>因材施教</div>
      <div>科学成长</div>
      <div>为国育才</div>
    </div>
    <div class="rightx"></div>
  </div>
  <div class="boo">
    <div style="box-sizing: border-box;padding-top: 100px;background: #E5E5E5;width: 100%;height: 888px;">
      <div class="left">
        <div class="imgbox">
          <div class="imgss">
            <img :src="moreDetail.cover">
          </div>
          <div class="hoverdiv" style="z-index: 0"></div>
        </div>
        <div class="asdasdasdasdasd">
          <div class="liness"></div>
          <div class="sadasd" style="color: #000000;">GRAND OPENING</div>
        </div>
      </div>
      <div class="right">
        <div class="title titlea" style="
">
          部分合作校名单
        </div>
        <div class="liness" style="width: 300px;margin-top: 30px"></div>
        <div class="lints">
          <div v-for="(item,index) in rows" :key="index">{{item.title}}</div>
        </div>
      </div>
    </div>
    <div style="height: 167px;background: #fff;">
      <div class="asdadas11" style="width: 65%;margin-left: auto;height: 100%;background: #E5E5E5;z-index: 3;">
        <a-pagination :current="page11" :pageSize="10" @change="changePage" :total="total"   />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.asdadas11 {
  padding-top: 70px;
  box-sizing: border-box;
  padding-left: 200px;
}
.lints {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  div {
    //border: 1px solid #E9E9EA;
    padding: 10px;
    font-size: 30px;
    color: #000000;
    width: 80%;
    line-height: 38px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: bold;
  }
}
.titlea {
  font-size: 63px;
  color: #023B8E;
  text-align: left;
  margin-top: 100px;
  font-style: normal;
}
.asdasdasdasdasd {
  margin-left: 200px;
  margin-top: 530px;

}
.liness {
  height: 6px;
  width: 100px;
}
.sadasd {
  font-size: 26px;margin-top: 20px;
}
.slogo {
  position: absolute;
  right: 0;
  top: 92px;
  z-index: 1;
  width: 1060px;
  height: 118px;
  margin-left: auto;
  background: linear-gradient( 180deg, #1E6FEC 0%, #003687 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  .texr {
    z-index: 111;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 38px;
    line-height: 38px;
    font-style: normal;
    color: #fff;
    > div {
      margin-left: 40px;
    }
  }
  .rightx {
    height: 2px;
    width: 350px;
    background: #fff;
    margin-left: auto;
  }
}
.boo {
  > div {
    display: flex;
    flex-direction: row;
  }
  .left {
    width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .imgbox {
      margin-top: 300px;
      position: relative;
      .imgss{
        position: absolute;
        z-index: 1;
        width: 689px;
        height: 473px;
        margin-bottom: 45px;
        margin-left: 200px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .hoverdiv {
        position: absolute;
        width: 542px;
        height: 331px;
        background: linear-gradient(to top, rgba(29, 109, 232, 0) 0%, #718DB6 100%);
        right: -100px;
        top: 100px;
        z-index: 2;
      }
    }
    box-sizing: border-box;
    padding-left: 200px;
  }
  .right {
    width: 65%;
    background: #CECECE;
    height: 100%;
    box-sizing: border-box;
    padding-left: 350px;
    padding-top: 100px;
    .contessadnt{
      height: 100%;
      width: 100%;
      margin-left: -100px;
      overflow-y: auto;
      min-height: 60vh;
      ::v-deep span {
        background: #CECECE !important;
        line-height:80px !important;
      }
      ::v-deep section {
        background: #CECECE !important;
      }
      ::v-deep ul {
        background: #CECECE !important;
      }
      ::v-deep p {
        background: #CECECE !important;
      }

      ::v-deep span {
        background: #CECECE !important;
      }
      ::v-deep img {
        width: 100% !important;
      }

      ::v-deep div {
        background: #CECECE;
      }
    }
  }
}
</style>
